<template>
  <div class="register-container">
    <div class="register-card">
      <div class="card-header">
        <i class="fas fa-user-plus"></i>
        <h2>创建账户</h2>
        <p>欢迎加入DeepSeek社区</p>
      </div>
      
      <form @submit.prevent="handleRegister" class="register-form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            id="username"
            v-model="form.username"
            type="text"
            required
            placeholder="请输入用户名"
            :class="{ error: error }"
          >
        </div>
        
        <div class="form-group">
          <label for="email">邮箱</label>
          <input
            id="email"
            v-model="form.email"
            type="email"
            required
            placeholder="请输入邮箱"
            :class="{ error: error }"
          >
        </div>
        
        <div class="form-group">
          <label for="password">密码</label>
          <input
            id="password"
            v-model="form.password"
            type="password"
            required
            placeholder="请输入密码"
            :class="{ error: error }"
          >
        </div>
        
        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input
            id="confirmPassword"
            v-model="form.confirmPassword"
            type="password"
            required
            placeholder="请再次输入密码"
            :class="{ error: error }"
          >
        </div>
        
        <div v-if="error" class="error-message">
          <i class="fas fa-exclamation-circle"></i>
          {{ error }}
        </div>
        
        <div v-if="success" class="success-message">
          <i class="fas fa-check-circle"></i>
          {{ success }}
        </div>
        
        <button type="submit" :disabled="loading" class="register-btn">
          <i class="fas fa-spinner fa-spin" v-if="loading"></i>
          <span v-else>注册</span>
        </button>
      </form>
      
      <div class="switch-auth">
        <span>已有账户？</span>
        <button @click="switchToLogin" class="switch-btn">
          立即登录
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { auth } from '../utils/auth'

export default {
  name: 'Register',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      error: '',
      success: '',
      loading: false
    }
  },
  methods: {
    async handleRegister() {
      this.loading = true;
      this.error = '';
      this.success = '';
      
      try {
        // 表单验证
        if (!this.form.username.trim()) {
          this.error = '请输入用户名';
          return;
        }
        
        if (!this.form.email.trim()) {
          this.error = '请输入邮箱';
          return;
        }
        
        if (!this.form.password.trim()) {
          this.error = '请输入密码';
          return;
        }
        
        if (this.form.password !== this.form.confirmPassword) {
          this.error = '两次输入的密码不一致';
          return;
        }
        
        if (this.form.password.length < 6) {
          this.error = '密码长度至少6位';
          return;
        }
        
        const result = auth.register(
          this.form.username,
          this.form.password,
          this.form.email
        );
        
        if (result.success) {
          this.success = result.message;
          setTimeout(() => {
            this.$emit('register-success');
          }, 1500);
        } else {
          this.error = result.message;
        }
      } catch (err) {
        this.error = '注册失败，请重试';
      } finally {
        this.loading = false;
      }
    },
    
    switchToLogin() {
      this.$emit('switch-to-login');
    }
  }
}
</script>

<style scoped>
.register-container {
  width: 100%;
  max-width: 450px;
  padding: 20px;
}

.register-card {
  background: rgba(30, 41, 59, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid #334155;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card-header {
  text-align: center;
  margin-bottom: 40px;
}

.card-header i {
  font-size: 48px;
  color: #60a5fa;
  margin-bottom: 20px;
  display: block;
}

.card-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 8px;
}

.card-header p {
  color: #94a3b8;
  font-size: 16px;
}

.register-form {
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #cbd5e1;
  font-weight: 500;
  font-size: 14px;
}

.form-group input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #475569;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  color: #e2e8f0;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.form-group input.error {
  border-color: #ef4444;
}

.error-message {
  color: #ef4444;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.1);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.success-message {
  color: #10b981;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.register-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.register-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.register-btn:disabled {
  background: #475569;
  cursor: not-allowed;
  transform: none;
}

.switch-auth {
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

.switch-btn {
  background: none;
  border: none;
  color: #60a5fa;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 6px;
  font-weight: 500;
}

.switch-btn:hover {
  color: #3b82f6;
}

@media (max-width: 480px) {
  .register-card {
    padding: 30px 24px;
    margin: 10px;
  }
  
  .card-header i {
    font-size: 40px;
  }
  
  .card-header h2 {
    font-size: 24px;
  }
  
  .form-group input {
    padding: 12px 14px;
    font-size: 14px;
  }
  
  .register-btn {
    padding: 14px;
    font-size: 14px;
  }
}
</style>